<!DOCTYPE HTML>
<html>
	<head>
		<title>Starloot!</title>
		<link rel="stylesheet" href="css/mainStyles.css" type="text/css" media="screen"/>
	</head>
<body>
    <canvas id="canvas"></canvas>
	<div id="rightPanel" style="position:absolute;top:0;right:0;width:128px;color:white;background-color:rgba(0,0,128,0.5)">
		<div style="position:absolute;background-color:rgba(0,0,0,0.5);padding:0"><ul id="selectionList"></ul></div>
		<div style="position:absolute;bottom:0;background-color:rgba(0,0,0,1);padding:0"><canvas id="mapCanvas"></canvas></div>
		
		<div id="whooots"></div> 
	</div>
	
	<div id="mainMenuPanel" class="gameWindow">
		<div id="mainMenuPlanetBg" class="absolute translucent2"></div>
		<div id="top">
			<div style="float:left;width:6px;height:6px;background-image:url(gui/images/topleft.png)"></div>
			<div id="topCentral" style="float:left;height:6px;background-image:url(gui/images/top.png);background-repeat:repeat-x"></div>
			<div style="float:right;width:7px;height:6px;background-image:url(gui/images/topright.png)"></div>
		</div>
		<div id="menuleft" style="background-image: url(gui/images/menuleft.png);float:left;"> </div>
		<div id="mainMenyTileableBg" class="translucent95" style="float:left"></div>
		<div id="menuright" style="background-image: url(gui/images/right.png);float:right;">
			<div id="mainMenuContent" class="absolute" style="margin-left:5px;margin-top:5px"><a href="#">HOVER ME!</a></div>
		</div>
		<div id="bottom">
			<div style="float:left;width:6px;height:6px;background-image:url(gui/images/bottomleft.png)"></div>
			<div id="bottomCentral" style="float:left;height:6px;background-image:url(gui/images/bottom.png);background-repeat:repeat-x"></div>
			<div style="float:right;width:7px;height:6px;background-image:url(gui/images/bottomright.png)"></div>
		</div>
		<div style="clear: both"></div>
		
	</div>
	<script type="text/javascript">
	window.onresize = function(event){
		document.getElementById('rightPanel').style.height = window.innerHeight+'px';
		mainMenuPanel.style.height = '300px';
	};
	
	document.getElementById('rightPanel').style.height = window.innerHeight+'px';
	mainMenuPanel.style.height = '300px';
	mainMenuPanel.style.width = '200px';
	mainMenuPlanetBg.style.height = '300px';
	mainMenuPlanetBg.style.width = '200px';
	mainMenyTileableBg.style.height = '288px';
	mainMenyTileableBg.style.width = '187px';
	mainMenuPanel.style.top = '50px';
	mainMenuPanel.style.left = '200px';
	menuleft.style.height = '288px';
	menuleft.style.width = '6px';
	menuright.style.height = '288px';
	menuright.style.width = '7px';
	topCentral.style.width = '187px';
	bottomCentral.style.width = '187px';
	
	</script>
<script src="sound/sound.js" type="text/javascript"></script>
<script src="kdtree.js" type="text/javascript"></script>
<script src="utils.js" type="text/javascript"></script>
<script src="ooutils.js" type="text/javascript"></script>
<script src="events/group.js" type="text/javascript"></script>
<script src="events/keyboard.js" type="text/javascript"></script>
<script src="events/mouse.js" type="text/javascript"></script>
<script src="events/touch.js" type="text/javascript"></script>
<script src="events/eventmanager.js" type="text/javascript"></script>
<script src="pathfinder.js" type="text/javascript"></script>
<script src="matrix.js" type="text/javascript"></script>
<script src="building.js" type="text/javascript"></script>
<script src="camera.js" type="text/javascript"></script>
<script src="minheap.js" type="text/javascript"></script>
<script src="board.js" type="text/javascript"></script>
<script src="render/resources.js" type="text/javascript"></script>
<script src="render/resourcemanager.js" type="text/javascript"></script>
<script src="render/drawable.js" type="text/javascript"></script>
<script src="render/animation.js" type="text/javascript"></script>
<script src="render/paintable.js" type="text/javascript"></script>
<script src="render/node.js" type="text/javascript"></script>
<script src="render/movablenode.js" type="text/javascript"></script>
<script src="render/staticnode.js" type="text/javascript"></script>
<script src="render/renderer.js" type="text/javascript"></script>
<script src="gui/menu.js" type="text/javascript"></script>
<script src="gui/minimap.js" type="text/javascript"></script>
<script src="gui/selector.js" type="text/javascript"></script>
<script src="gui/gui.js" type="text/javascript"></script>
<script src="logic/logic.js" type="text/javascript"></script>
<script src="units/vehicles/scout.js" type="text/javascript"></script>
<script src="alkaitz.js" type="text/javascript"></script>
<script src="stats.js" type="text/javascript"></script>
<script src="game.js" type="text/javascript"></script>
<script src="src.js" type="text/javascript"></script>
</body>
</html>
